<template>
    <div>
      <!--  搜索区    -->
      <div>
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
          <div>
            <el-input style="width: 300px;margin-right: 10px"
                      prefix-icon="el-icon-search"
                      v-model="empName"
                      @keydown.enter.native="initSalTable"
                      clearable
                      @clear="initSalTable"
                      placeholder="请输入员工名进行搜索..."></el-input>
            <el-button type="primary" icon="el-icon-search" @click="initSalTable">搜索
            </el-button>
          </div>
        </div>
      </div>
      <!--   表格显示区   -->
      <div>
        <el-table
            :data="saltables"
            border
            size="mini"
            stripe>
          <el-table-column
              type="selection"
              align="left"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="ID"
              align="left"
              fixed
              width="120">
          </el-table-column>
          <el-table-column
              prop="workID"
              label="工号"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="name"
              label="员工姓名"
              align="left"
              width="200">
          </el-table-column>
          <el-table-column
              prop="department.name"
              label="所属部门"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="position.name"
              label="职位"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="joblevel.name"
              label="职称"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="salaryDate"
              label="工资月份"
              align="left"
              width="120">
              <template slot-scope="scope">{{scope.row.salaryDate | dateyyyyMMFormat}}</template>
          </el-table-column>
          <el-table-column
              prop="basicSalary"
              label="基本工资"
              align="left"
              width="120">
          </el-table-column><el-table-column
            prop="lunchSalary"
            label="午餐补助"
            align="left"
            width="120">
        </el-table-column>
          <el-table-column
            prop="trafficSalary"
            label="交通补助"
            align="left"
            width="120">
        </el-table-column>
          <el-table-column
              prop="safeguardSalary"
              label="五险一金"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="bonus"
              label="奖金"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="allSalary"
              label="应发工资"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="insertDate"
              label="创建时间"
              align="left"
              width="120">
              <template slot-scope="scope">{{scope.row.insertDate | dateyyyyMMddFormat}}</template>
          </el-table-column>
        </el-table>
        <!--  分页栏      -->
        <div style="display: flex;justify-content: flex-end">
          <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "SalTable",
        mounted() {
            this.initSalTable();
        },
        data(){
          return{
            saltables:[],
            empName: '', //搜索的员工姓名
            currentPage: 1,
            size: 10,
            total: 0,
          }
        },
        methods:{
          initSalTable(){
            this.getRequest('/sal/table/?currentPage=' + this.currentPage + '&size=' + this.size + '&ename='+this.empName).then(resp =>{
              if(resp){
                  console.log(resp)
                this.saltables = resp.data;
                this.total = resp.total;
              }
            })
          },
            //pageSize 改变时会触发
            sizeChange(size) {
                this.size = size;
                this.initperMv();
            },
            //currentPage 改变时会触发
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.initperMv();
            },
        }
    }
</script>

<style scoped>

</style>